<template>
	<view class="content">
		<music v-if="isplayingmusic" :img="curimg" @to="toPlayer()"></music>
		<view class="topbar">
			<view class="back" @tap="back()">
				<image src="../../static/image/search/back.png" mode=""></image>
			</view>
			<view class="searchbox">
				<view class="input">
					{{ keywords }}
				</view>
			</view>
			<view class="search">
			</view>
		</view>
		<view class="songlist">
			<view class="box" v-for="(item,index) in songslist" :key='index' @tap="showCard(index)">
				<view class="img">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="name">
					{{item.listname}}
				</view>
			</view>
		</view>
		<view class="card" :animation="animationData">
			<image class="hid" src="../../static/image/search/back.png" mode="" @tap="showCard(0)"></image>
			<view class="bg">
				<image :src="box.img"></image>
			</view>
			<view class="topbox">
				<view class="imgs">
					<image :src="box.img" mode=""></image>
				</view>
				<view class="mid">
					<view class="listname">
						{{box.listname}}
					</view>
					<view class="nick">
						{{box.nickname}}
					</view>
				</view>
				<view class="msg">
					<text class="description">
						{{box.description}}
					</text>
				</view>
			</view>
			<view class="list">
				<view class="listrow">
					<view class="name">
						<text class="num">
						</text>
						- 所有歌曲
					</view>
					<view class="singer">

					</view>
					<view class="addsong">
						<!-- <image src="../../static/image/songlist/add.png" mode=""></image> -->
					</view>
					<view class="playsong" @tap="playAll()">
						<image src="../../static/image/songlist/play.png" mode=""></image>
					</view>
				</view>
				<view class="listrow" v-for="(items,indexs) in box.track" :key='indexs'>
					<view class="name">
						<text class="num">
							{{ indexs+1+ ' ' }}
						</text>
						{{items.name}}
					</view>
					<view class="singer">
						{{items.artists[0].name}}
					</view>
					<view class="addsong" @tap="addOne(indexs)">
						<image src="../../static/image/songlist/add.png" mode=""></image>
					</view>
					<view class="playsong" @tap="playOne(indexs)">
						<image src="../../static/image/songlist/play.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import Vue from 'vue'
	export default {
		data() {
			return {
				show: false,
				keywords: '',
				songslist: [],
				animationData: {},
				hidwidth:0,
				box:{}
			};
		},
		computed: {
			...mapGetters(['curimg', 'curindex', 'audiolist', 'isplayingmusic']),
		},
		onLoad(e) {
			this.keywords = e.key;
			this.search();
			console.log(this.songslist)
		},
		onReady() {
			this.getElementStyle();
		},
		methods: {
			...mapMutations(['setCurImg', 'setCurIndex', 'setAudiolist', 'setIsplayingmusic']),
			//搜索歌单
			search: function() {
				this.songslist = [];
				if (this.keywords) {
					let opts = {
						url: '/search',
						data: {
							keywords: this.keywords,
							type: 1000
						},
						method: 'GET',
					}
					request.request(opts).then((res) => {
						res.result.playlists.forEach((item, index) => {
							let id = item.id;
							let listname = item.name;
							let img = item.coverImgUrl;
							let nickname = item.creator.nickname;
							let description = item.description;
							let track = [];

							this.songslist.push({
								id,
								listname,
								nickname,
								img,
								description,
								track,
							});
						});

						this.songslist.forEach((item, index) => {
							uni.request({
								url: '/api/playlist/detail',
								data: {
									id: item.id
								},
								method: 'GET',
								success: (res) => {
									item.track = res.data.result.tracks;
								}
							});
						});
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '内容不能为空！',
						duration: 2000,
					})
				}
			},

			//跳转到主页
			back: function() {
				uni.navigateTo({
					url: '../index/index'
				})
			},
			
			//跳转到播放页面
			toPlayer: function() {
				uni.navigateTo({
					url: "../player/player"
				})
			},
			
			//获取设备信息
			getElementStyle: function(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.content').boundingClientRect(data=>{
					// console.log("得到布局位置信息："+JSON.stringify(data));
					// console.log("节点离页面顶部的高度为："+data.top);
					this.hidwidth = data.width+10;
				}).exec();
			},

			//弹出歌单详情
			showCard: function(e) {
				this.box = this.songslist[e]
				this.show = !this.show;
				var animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease',
				});
				if (this.show) {
					animation.right(0).step();
				} else {
					animation.right(-this.hidwidth).step();
				}
				this.animationData = animation.export();
			},

			//播放一首歌
			playOne: async function(index) {
				let res = await this.geturl(this.box.track[index].id);
				let url = res.data.data[0].url;
				this.setIsplayingmusic(true);
				this.setCurImg(this.box.img);
				this.setCurIndex(0);
				let songinfo = {
					id: this.box.track[index].id,
					songname: this.box.track[index].name,
					artistname: this.box.track[index].artists[0].name,
					time: '',
					picurl: this.box.img,
					url: url
				}
				if (res.data.data[0].url) {
					this.setAudiolist([songinfo])
					Vue.prototype.$au_player.src = this.audiolist[this.curindex].url;
					Vue.prototype.$au_player.play();
				} else {
					uni.showToast({
						icon: 'none',
						title: '歌曲跑丢了'
					})
				};
				// console.log(this.audiolist)
			},

			//添加一首歌
			addOne: async function(index) {
				if(this.isInList(this.box.track[index].id)){
					if (this.isplayingmusic) {
						let res = await this.geturl(this.box.track[index].id);
						let url = res.data.data[0].url;
						let songinfo = {
							id: this.box.track[index].id,
							songname: this.box.track[index].name,
							artistname: this.box.track[index].artists[0].name,
							time: '',
							picurl: this.box.img,
							url: url
						}
						let list = this.audiolist;
						list.push(songinfo);
						this.setAudiolist(list);
						uni.showToast({
							icon:'none',
							title:'已加入播放列表'
						})
					}else{
						this.playOne(index);
					}
				}else{
					// console.log(this.audiolist)
				}
			},
			
			//播放所有歌曲
			playAll:async function(){
				this.playOne(0);
				this.setIsplayingmusic(true)
				this.setCurIndex(0)
				this.setCurImg(this.box.img)
				let list = [];
				for(let i=1;i<this.hotsongs.length;i++){
					let res = await this.geturl(this.box.track[i].id);
					let url = res.data.data[0].url;
					let songinfo = {
						id: this.box.track[i].id,
						songname: this.box.track[i].name,
						artistname: this.box.track[i].artists[0].name,
						time: '',
						picurl: this.box.img,
						url: url
					}
					list.push(songinfo);
				}
				this.setAudiolist(list)
				console.log(this.audiolist)
			},
			
			//是否在歌单里面
			isInList: function(id){
				for(let i=0;i<this.audiolist.length;i++){
					if(id == this.audiolist[i].id){
						uni.showToast({
							icon:'none',
							title:'歌曲已经在列表里面啦~'
						})
						return false;
					}
				}
				return true;
			},

			//获取url
			geturl: function(id) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: "https://qqyifeng.cn:9001/song/url",
						data: {
							id: id,
						},
						method: "GET",
						success: function(res) {
							// console.log(res)
							resolve(res);
						}
					});
				})
			},
			
			
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: $uni-spacing-row-sm 0rpx;
		background-attachment:fixed;
		// padding-top: var(--status-bar-height);
		// bottom: env(safe-area-inset-bottom);

		.topbar {
			display: flex;
			width: 100%;
			height: 72rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #F1F1F1;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			.back {
				felx: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
			}

			.searchbox {
				flex: 7;
				color: #666;
				margin: 0 8rpx;

				.input {
					width: 100%;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					color: #666;
					border-radius: 12rpx;
				}
			}

			.search {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
			}
		}

		.songlist {
			display: flex;
			align-content: flex-start;
			flex-flow: row wrap;
			padding-left: 10rpx;
			padding-right: 10rpx;

			.box {
				flex: 0 0 25%;
				margin: 30rpx 20rpx;
				width: 250rpx;
				height: 250rpx;

				.img {
					image {
						opacity: 0.9;
						width: 200rpx;
						height: 200rpx;
						border-radius: 24rpx;
						box-shadow: 10rpx 10rpx 10rpx #888;
					}
				}

				.name {
					padding-top: 10rpx;
					font-size: 24rpx;
					text-align: center;
					max-width: 180rpx;
					margin-left: 10rpx;
					color: #666;
					display: -webkit-box !important;
					text-overflow: ellipsis;
					overflow: hidden;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}

		.card {
			z-index: 998;
			background-color: #fff;
			width: 100%;
			height: 50%;
			position: fixed;
			top: 50%;
			right: -170%;
			overflow: hidden;

			// left: -170%;
			.hid {
				position: absolute;
				top: 10rpx;
				z-index: 999;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				width: 60rpx;
				height: 60rpx;
			}

			.bg {

				top: -50rpx;
				left: -50rpx;
				width: 100%;
				position: relative;
				filter: blur(10px);

				image {
					opacity: 0.5;
					position: absolute;
					width: 150%;
				}
			}

			.topbox {
				display: flex;
				width: 100%;

				// flex-direction: row;
				.imgs {
					z-index: 999;
					flex: 3;
					margin: 60rpx 20rpx 20rpx 40rpx;
					width: 200rpx;
					height: 200rpx;

					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 24rpx;
						box-shadow: 10rpx 10rpx 10rpx #888;
					}
				}

				.mid {
					z-index: 999;
					padding: 60rpx 0rpx;
					flex: 3;
					display: flex;
					flex-direction: column;

					.listname {
						margin-top: 60rpx;
						font-size: 38rpx;
						font-weight: 550;
						display: -webkit-box !important;
						text-overflow: ellipsis;
						overflow: hidden;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.nick {
						color: #444;
						margin-top: 10rpx;
						font-size: 24rpx;
						display: -webkit-box !important;
						text-overflow: ellipsis;
						overflow: hidden;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}

				.msg {
					z-index: 999;
					padding: 80rpx 0rpx;
					flex: 4;
					width: 260rpx;
					height: 180rpx;

					.description {
						width: 250rpx;
						height: 170rpx;
						font-size: 24rpx;
						color: #666;
						display: -webkit-box !important;
						text-overflow: ellipsis;
						overflow: hidden;
						-webkit-line-clamp: 5;
						-webkit-box-orient: vertical;
					}
				}
			}

			.list {
				z-index: 999;
				width: 90%;
				height: 50%;
				margin: -30rpx auto;
				background-color: #C0C0C0;
				border-radius: 32rpx 32rpx 0 0;
				padding: 12rpx 24rpx;
				overflow-y: auto;

				.listrow {
					z-index: 999;
					display: flex;
					height: 42rpx;
					line-height: 42rpx;
					border-bottom: 1rpx solid #fff;
					padding: $uni-spacing-row-base 0;

					.name {
						flex: 3;
						padding-left: 20rpx;
						font-size: 30rpx;
						color: #000;
						display: -webkit-box !important;
						text-overflow: ellipsis;
						overflow: hidden;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;

						.num {
							color: #C0C0C0;
							font-size: 30rpx;
						}
					}

					.singer {
						flex: 3;
						color: #555;
						font-size: 30rpx;
						overflow: hidden;
					}

					.addsong {
						flex: 1;
						text-align: center;

						image {
							width: 38rpx;
							height: 38rpx;
						}
					}

					.playsong {
						flex: 1;
						text-align: center;

						image {
							width: 38rpx;
							height: 38rpx;
						}
					}
				}
			}
		}
	}
</style>
